<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <!-- 下拉框 -->
    <link rel="stylesheet" href="static/ace/css/chosen.css"/>
    <!-- jsp文件头和头部 -->
    <%@ include file="../index/top.jsp" %>
    <!-- 日期框 -->
    <link rel="stylesheet" href="static/ace/css/datepicker.css"/>
    <link href="plugins/kindeditor/themes/default/default.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="static/styles/base.css" rel="stylesheet">
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <form action="goods/${msg}.do" method="post" name="recommendedForm" id="recommendedForm">
                            <div id="zhongxin" style="padding-top: 13px;">
                                <input id="id" name="id" value="${obj.id}" type="hidden">
                                <input id="attr" name="attr" value="" type="hidden">
                                <input id="param" name="param" value="" type="hidden">
                                <table id="simple-table" class="table table-striped table-bordered table-hover"
                                       style="margin-top:5px;">
                                    <thead>
                                    <tr>
                                        <th width="60"></th>
                                        <th width="220" class="tc">规格名称</th>
                                        <th>规格值 &nbsp;&nbsp;&nbsp;(可使用键盘“回车键”快速添加规格值)</th>
                                    </tr>
                                    </thead>
                                    <tbody class="vm goods-box">
                                    <tr>
                                        <td>
                                            <div class="tc"><a
                                                    class="dib vm ion-android-remove btn-less-spec f20 g3 ml10"
                                                    href="javascript:;"></a></div>
                                        </td>
                                        <td class="tc"><input type="text" name="spec" value="规格1"></td>
                                        <td class="tc">
                                            <div class="rel"><input class="tags" type="text" name="spec"
                                                                    placeholder="输入规格"></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <table id="simple-table1" class="table table-striped table-bordered table-hover"
                                       style="margin-top:5px;">
                                    <tbody class="vm goods-box1">
                                    <tr>
                                        <td>
                                            <div><a class="dib vm ion-android-add btn-add-spec f16 g3"
                                                    href="javascript:;">添加规格</a></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div class="tr">
                                    <a class="dib pd10 f16 white mr20 btn-generate btn btn-primary" href="javascript:;">生成规格</a>
                                </div>

                                <table id="data" class="table table-bordered tc js-goods-standard dn mt20 pt20"
                                       data-drag="false">
                                    <thead></thead>
                                    <tbody class="goods-standard-list"></tbody>
                                </table>
                            </div>
                            <div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><img
                                    src="static/images/jiazai.gif"/><br/><h4 class="lighter block green"></h4></div>
                        </form>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
</div>
<!-- /.main-container -->
<!-- basic scripts -->
<!-- 页面底部js¨ -->
<%@ include file="../index/foot.jsp" %>
<!-- ace scripts -->
<script src="static/ace/js/ace/ace.js"></script>
<!-- inline scripts related to this page -->
<!-- 下拉框 -->
<script src="static/ace/js/chosen.jquery.js"></script>
<!--提示框-->
<script type="text/javascript" src="static/js/jquery.tips.js"></script>

<script type="text/javascript" src="static/js/common/file_upload.js"></script>
<script type="text/javascript" src="plugins/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="plugins/kindeditor/lang/zh_CN.js"></script>
<script src="https://cdn.bootcss.com/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
</body>
<script type="text/javascript">
    $(top.hangge());

    $(function () {
        newSpec()
        tags()
    });

    function newSpec() {
        var tbody1 = $('.goods-box1')
        var tbody = $('.goods-box')
        // 添加
        tbody1.on('click', '.btn-add-spec', function () {
            var $tr = tbody.find('tr')
            if ($tr.length >= 2) {
                $("#simple-table1").hide();
            }
            var num = +$tr.length + 1
            var html = template(num)
            $tr.eq(0).find('.btn-less-spec').show()
            tbody.append(html)

            tags()
        })
        // 删除
        tbody.on('click', '.btn-less-spec', function () {
            var $tr = tbody.find('tr')
            var index = $(this).parents('tr').index()

            if ($tr.length == 3) {
                $("#simple-table1").show();
            }
            if ($tr.length == 1) return false;
            var goodsId = $(this).parents('tr').find("input[name=goodsId]").val();
            if (goodsId != null) {
                delete goodsList[goodsId];
            }
            $(this).parents('tr').remove();
            $('tester').eq(index).remove()

        })

    }


    // 获取规格数据
    function getInputVal() {
        var $table = $('.js-goods-standard');
        var ths = $table.find('thead th')
        var trs = $table.find('tbody tr')
        var html = ''
        var data = [{
            key: [],
            value: []
        }]
        for (var i = 1; i < ths.length; i++) {
            var val = ths.eq(i).text()
            data[0].key.push(val)
        }
        for (var i = 0; i < trs.length; i++) {
            var tds = trs.eq(i).find('td')
            var text = '';
            data[0].value.push([])
            for (var j = 1; j < tds.length; j++) {
                var val = tds.eq(j).find('input[name=stock]').val()
                var index = tds.eq(j).attr('data-index')
                if (index) {
                    if (j === tds.length - 2) {
                        text += index
                    } else {
                        text += index + '-'
                    }
                }
                if (!!val) {
                    data[0].value[i].push($.trim(val));
                }

            }
            data[0].value[i].push(text);
        }
        var data = JSON.stringify(data);
        $("#param").val(data);
    }

    // tag 数据
    function getTagVal() {
        var num = 0;
        var data = []
        var $tbody = $('.goods-box');
        var $trs = $tbody.find('tr');
        for (var i = 0; i < $trs.length; i++) {
            var key = $trs.eq(i).find('input[name=spec]').val();
            var $tags = $trs.eq(i).find('.tag');
            data.push({key: key, value: []});
            if (i == 0) {
                num = $tags.length
            } else {
                num = num * $tags.length;
            }
            for (var j = 0; j < $tags.length; j++) {
                var val = $.trim($tags.eq(j).find('span').text());
                data[i].value.push(val)
            }

        }
        if (num >= 200) {
            return num;
        }
        var param = JSON.stringify(data);
        $("#attr").val(param);
    }

    $('.btn-generate').on('click', function () {
        var num = getTagVal();
        if (num >= 200) {
            alert("商品规格不能超过200个!")
            return false;
        }
        generate()
        var $tr = $('.goods-box tr');
        var len = $tr.length;
        var ths = '<tr><th width="50" class="tc"></th>'
        for (var i = 0; i < len; i++) {
            var val = $tr.eq(i).find('input[name=spec]').val()
            ths += '<th width="200" class="tc norm-item-key">' + val + '<input type="hidden" value="' + val + '"></th>'
        }
        ths += '<th>库存<input type="hidden" name="" value="库存"></th></tr>'
        $('.js-goods-standard').find('thead').html(ths)
        //getInputVal();
    })

    function generate() {
        var $tagsinput = $('.tagsinput');
        var len = $tagsinput.length;
        var html = '', text = '', initIndex = 0;
        var tagVal = [];

        (function recursively(n, vhtml) {
            if (n >= len) return false;
            var ele = $tagsinput.eq(n);
            var tags = ele.find('.tag');
            if (!tags.length) {
                recursively(n + 1, '');
            }
            for (var j = 0; j < tags.length; j++) {
                var tag = tags.eq(j);
                var val = tag.find('span').text()
                text = vhtml + '<td class="norm-item-value" data-index="p' + (j + 1) + '">' + val + '</td>';
                if (n === len - 1) {
                    initIndex += 1;
                    html += '<tr class="goods-standard-item">';
                    html += '<td><div class="serial-number">' + initIndex + '</div></td>';
                    html += text;
                    html += '<td><input class="form-control" type="number" value="1" min="0" name="stock" id="stock"></td></tr>';


                }
                recursively(n + 1, text);
            }
        })(0, '');
        $('.js-goods-standard').show().find('tbody').html(html)

    }


    function tags() {
        $('.tags').tagsInput({
            width: 'auto',
            height: 'auto',
            defaultText: '',
            onAddTag: function (txt) {
            },
            onRemoveTag: function (txt) {
            }
        });
    }

    function template(num) {
        var html = '<tr><td><div class="tc">' +
            '<a class="dib vm ion-android-remove btn-less-spec f20 g3 ml10" href="javascript:;"></a></div>' +
            '</td><td class="tc"><input type="text" name="spec" value="规格' + num + '"></td>' +
            '<td class="tc"><div class="rel"><input class="tags" type="text" name="spec" placeholder="输入规格"></div></td></tr>';
        return html;
    }

</script>
</html>